<template>
  <div class="template-recommendation-popup" :style="{ backgroundImage: 'url(' + $serverImgUrl + 'popup1.png' + ')' }">
    <!-- 关闭按钮 -->
    <button class="close-button" @click="handleClose">×</button>

    <!-- 左侧内容区域 -->
    <div class="left-content">
      <!-- 行业最优模板标签 -->
      <div class="industry-tag">
        <div class="industry-tag-image">
          <img
            :src="$serverImgUrl + 'popup5.png'"
            alt="行业最优模板"
          />
        </div>
        <span style="position: relative; top: 7px">行业最优模板</span>
      </div>

      <!-- 模板名称 -->
      <div class="template-info">
        <icon-title
          title="模版名称"
          :isBold="true"
          :customStyle="{ padding: '0' }"
          icon="el-icon-caret-right"
          textColor="#323232"
          iconColor="#348CF8"
        />
        <div class="info-value">智慧园区（适合小型工厂）</div>
      </div>

      <!-- 标签 -->
      <div class="template-info">
        <icon-title
          title="标签"
          :isBold="true"
          :customStyle="{ padding: '0' }"
          icon="el-icon-caret-right"
          textColor="#323232"
          iconColor="#348CF8"
        />
        <div class="tag-container">
          <span class="feature-tag">管理服务</span>
          <span class="feature-tag">企业互动</span>
        </div>
      </div>

      <!-- 功能描述 -->
      <div class="template-info">
        <icon-title
          title="功能"
          :isBold="true"
          :customStyle="{ padding: '0' }"
          icon="el-icon-caret-right"
          textColor="#323232"
          iconColor="#348CF8"
        />
        <div class="function-description">
          <p>
            园区公众号模板功能上集成服务与互动模块，含办事入口、活动报名等，贴合多元场景；视觉依园区类型适配风格，贯穿LOGO等专属元素；既满足管理服务等实用需求，又通过风格与元素复用展现特色，平衡功能与形象。
          </p>
        </div>
      </div>

      <!-- 扫码预览 -->
      <div class="preview-section">
        <div class="info-label f13" style="padding-left: 17px;">扫码预览</div>
        <div class="qrcode-container">
          <QrcodeGenerator
            ref="customQrcode"
            :content="customQrcodeConfig.content"
            :size="customQrcodeConfig.size"
            :foreground-color="customQrcodeConfig.foregroundColor"
            :background-color="customQrcodeConfig.backgroundColor"
            :error-correction-level="customQrcodeConfig.errorCorrectionLevel"
          />
        </div>
      </div>
    </div>

    <!-- 右侧预览图区域 站位-->
    <div class="right-preview"></div>
    <!-- 底部立即使用按钮 -->
    <div class="action-section">
      <el-button
        style="width: 120px"
        class="custom-btn none-radius"
        @click="handleUse"
        >立即使用</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "MaskOverlayTemplate",
  props: {
    // 可以根据需要添加props来接收动态数据
  },
  data() {
    return {
      // 自定义二维码配置
      customQrcodeConfig: {
        content: "https://www.ucharts.cn/v2/#/",
        size: 80,
        foregroundColor: "#333333",
        backgroundColor: "#ffffff",
        errorCorrectionLevel: "M",
      },
      // 数据部分可以根据需要扩展
    };
  },
  methods: {
    // 可以添加关闭、立即使用等按钮的点击事件
    handleClose() {
      this.$emit("close",'template');
    },

    handleUse() {
      this.$emit("handleUse");
    },
  },
};
</script>

<style scoped lang="scss">
.template-recommendation-popup {
  position: relative;
  width: 800px;
  min-height: 500px;
  background-color: #f0f7ff;
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100% 660px;
  // 关闭按钮
  .close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    color: #FFF;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;

    &:hover {
      background-color: rgba(0, 0, 0, 0.1);
      color: #333;
    }
  }

  // 内容区域布局
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;

  // 左侧内容
  .left-content {
    padding-right: 20px;

    // 行业标签
    .industry-tag {
      display: inline-block;
      background-repeat: no-repeat;
      background-size: contain;
      color: white;
      padding: 5px 15px;
      border-radius: 20px;
      font-size: 14px;
      margin-bottom: 20px;
      position: relative;
      .industry-tag-image {
        position: absolute;
        left: 0;
      }
    }

    // 信息项通用样式
    .template-info {
      margin-bottom: 20px;

      .info-label {
        font-weight: bold;
        color: #333;
        margin-bottom: 8px;
        font-size: 13px;
      }

      .info-value {
        color: #666;
        font-size: 13px;
        padding: 10px 0 0 17px;
      }
    }

    // 功能标签容器
    .tag-container {
      display: flex;
      gap: 10px;
      padding: 10px 0 0 17px;

      .feature-tag {
        background-color: #d9eaff;
        color: #348cf8;
        padding: 4px 12px;
        border-radius: 16px;
        font-size: 13px;
      }
    }

    // 功能描述
    .function-description {
      color: #666;
      font-size: 13px;
      line-height: 1.6;
      text-align: justify;
      padding: 10px 0 0 17px;
    }

    // 扫码预览
    .preview-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      .qrcode-container {
        margin-top: -9px;
        .qrcode-image {
          width: 100px;
          height: 100px;
          border: 1px solid #ddd;
        }
      }
    }
  }

  // 右侧预览图
  .right-preview {
    background-color: fff;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-size: cover;
    background-position-x: 1093px;
    width: 430px;
    max-height: 330px;
    margin-top: 50px;
    .preview-image {
      max-height: 400px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }

  // 底部操作按钮
  .action-section {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 20px;

    .use-button {
      background-color: #2196f3;
      color: white;
      border: none;
      padding: 12px 36px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background-color: #1976d2;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .template-recommendation-popup {
    width: 95%;
    grid-template-columns: 1fr;

    .left-content {
      padding-right: 0;
    }

    .right-preview {
      margin-top: 20px;
    }
  }
}
</style>
